import React from 'react';
import FormRender from 'form-render/lib/antd';
import styles from './index.less';
import { PlayGroundProps } from '../type';
import CodeBlock from '../monaco';

const PlayGround: React.FC<PlayGroundProps> = ({ schemaChange, setFormData, formData, schemaData, schemaStr }) => {
  return (
    <div className={styles.playGroundContainer}>
      <div className={styles.flex}>
        <div>
          <CodeBlock value={schemaStr} onChange={(str: string) => schemaChange(str)} />
        </div>
        <div>
          <FormRender
            schema={schemaData.schema}
            formData={formData}
            onChange={(data: any) => setFormData(data)}
            // onValidate={setValid}
            displayType="row" // 详细配置见下
          />
        </div>
      </div>
    </div>
  );
};

export default PlayGround;
